<template>
  <nav class="navbar navbar-expand-lg navbar nav-m">
    <div class="container">
      <router-link class="navbar-brand" :to="{name:'home'}" >Supermarket-System</router-link>
      <div class="collapse navbar-collapse" id="navbarText">
        <ul class="navbar-nav me-auto mb-2 mb-lg-0">
          <li class="nav-item">
            <router-link :class="route_name === 'home' ? 'nav-link active navbar-brand' :'nav-link' " :to="{name:'home'}">
              <button class="btn btn-light">首页</button>
            </router-link>
          </li>
          <li class="nav-item">
            <router-link :class="route_name === 'model_index' ? 'nav-link active ' :'nav-link' " :to="{name:'model_index'}">
              <button class="btn btn-light">Echarts</button>
            </router-link>
          </li>
            <li class="nav-item">
                <router-link :class="route_name === 'BaseRecommend' ? 'nav-link active ' :'nav-link' " :to="{name:'BaseRecommend'}">
                    <button class="btn btn-light">推荐</button>
                </router-link>
            </li>

        </ul>

          <ul class="navbar-nav" v-if="$store.state.user.is_login">
              <li class="nav-item dropdown">
                  <a class="nav-link dropdown-toggle"  style="color:#000;" role="button" data-bs-toggle="dropdown" aria-expanded="false">
                      {{$store.state.user.username}}
                  </a>
                  <ul class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
                      <li><a class="dropdown-item" href="#" @click="logout">退出</a></li>
                  </ul>
              </li>
          </ul>

          <ul class="navbar-nav" v-else>
              <li class="nav-item">
                  <router-link :class="route_name === 'Login' ? 'nav-link active' :'nav-link' " :to="{name:'Login'}">
                      <button class="btn btn-light">登录</button>
                  </router-link>
              </li>
              <li class="nav-item">
                  <router-link :class=" route_name === 'Register' ? 'nav-link active' : 'nav-link' " :to="{name:'Register'}">
                      <button class="btn btn-light">注册</button>
                  </router-link>
              </li>
          </ul>
      </div>
    </div>
  </nav>
</template>

<script>
import {useRoute} from  'vue-router'
import {computed} from "vue";
import {useStore} from "vuex";

export default {
  name: "NavBar",
  setup(){
    const store = useStore();
    const route = useRoute();

      // eslint-disable-next-line vue/return-in-computed-property
    let route_name = computed(() =>{route.name})
      const logout = () =>{
          store.dispatch("logout")
      }

    return{
      route_name,
        logout,
    }

  }
}
</script>

<style scoped>
.nav-m{
  background-color: white;
}

</style>

